<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
    <script type="text/javascript">
       window.onload = function(){
              var canvas =  document.getElementById('canvas');
             
             //1.客户端跟服务器通信
             var ws = new WebSocket("wss://www.frame.cn:9501");
             ws.onopen = function(event){
                     // Web Socket 已连接上，使用 send() 方法发送数据
                     console.log('连接建立');
                     //alert("数据发送中...");
              };

              ws.onmessage = function (event) 
               { 
                  var url = event.data;
                  console.log(event);    
                  draw(url);     
               };

               // ws.onclose = function(event){
               //      console.log('连接断开');
               // }

              function draw(url){
                   canvas.src = url;
             }
       }
      

    </script>

   <body style="margin:0;padding:0;">
              <img id="canvas"  width="500" height="300"  style='border:1px solid;margin-left:100px' />
   </body>
</html>